<template>
  <div class="userManage">
    <el-table :data="UserData.slice((admincurrentPage - 1) * adminpage, admincurrentPage * adminpage)"
      style="width: 100%;height: calc(100% - 40px);" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center', background: '#f0f0f5', color: '#606266' }" border>
      <el-table-column label="序号" width="55">
        <template slot-scope="scope">
          <span>{{ (admincurrentPage - 1) * adminpage + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="uName">
      </el-table-column>
      <el-table-column label="账号（邮箱号）" prop="uEmail">
      </el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.uImage" :preview-src-list="[scope.row.uImage]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="身份">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.role ? "管理员" : "普通用户" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.isDel ? "正常" : "已删除" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" prop="createTime">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isDel" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删
            除</el-button>
          <el-button v-else size="mini" type="primary" @click="handleRecview(scope.$index, scope.row)">恢 复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align: center;height: 40px;" background @current-change="adminhandleCurrentChange"
      :current-page.sync="admincurrentPage" layout="prev, pager, next" :page-size="adminpage" :total="UserData.length">
    </el-pagination>
  </div>
</template>

<script>
import apiUser from '@/api/apiUser'
export default {
  name: 'userManage',
  data() {
    return {
      UserData: [],
      admincurrentPage: 1,
      adminpage: 10
    }
  },
  created() {
    this.getAllUser()
  },
  methods: {
    getAllUser() {
      apiUser.GetAllUser().then(res => {
        this.UserData = res.data
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setState(row.id, 0)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleRecview(index, row) {
      this.$confirm('是否恢复此用户的状态？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setState(row.id, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消恢复'
        });
      });
    },
    setState(id, status) {
      apiUser.setState({ id, status: status }).then(res => {
        this.$message.success("操作成功！")
        this.getAllUser()
      })
    },
    adminhandleCurrentChange(val) {
      this.admincurrentPage = val
    }
  }
}
</script>

<style lang="less" scoped>
.userManage {
  width: 100%;
  height: 100%;
}
</style>